<script lang="ts" setup>
const projects = [
  {
    title: "hexo",
    description:
      "欢迎来到这个充满活力的博客世界！这里是一个融合了技术、生活与旅行元素的综合性博客平台。在技术领域，我们深入探讨各类前沿技术知识，包括编程语言的实用技巧、软件开发的最佳实践、新兴技术的发展趋势等，助力你在技术的道路上不断前行。生活板块则聚焦于日常生活中的点滴美好，分享生活中的奇闻趣事、实用的生活小窍门以及提升生活品质的方法。而旅行专题会带你领略世界各地的壮丽风景、独特文化和美食体验，让你足不出户就能感受到远方的魅力。无论你是技术爱好者、生活达人还是旅行探险家，都能在这里找到感兴趣的内容，与我们一同分享和探索各种有趣的知识与精彩的经历。",
    image:
      "https://cdn.pixabay.com/photo/2023/01/30/07/24/losangeles-7754986_1280.jpg",
    link: "https://gitee.com/feng-pan-fp/blog.git",
    tags: [
      { name: "Node.js", color: "#8e44ad" },
      { name: "Tailwind CSS", color: "#41b883" },
      { name: "Font Awesome", color: "#3c873a" },
    ],
  },
  {
    title: "医院管理平台",
    description:
      "医院管理平台，专注于提升医疗服务质量与效率，涵盖患者管理、资源调度及数据分析等功能，助力医疗机构实现智能化转型。",
    image:
      "https://cdn.pixabay.com/photo/2023/01/30/07/24/losangeles-7754986_1280.jpg",
    link: "https://gitee.com/feng-pan-fp/hospital-management-platform.git",
    tags: [
      { name: "Vue 3", color: "#61dafb" },
      { name: "TypeScript", color: "#f97316" },
      { name: "Vite", color: "#3178c6" },
      { name: "Node.js", color: "#8e44ad" },
    ],
  },
  {
    title: "B2模板",
    description:
      "B2 模板基于 HTML5、CSS3 和 JavaScript 等前沿技术开发，具备出色的跨平台兼容性，能在各类主流浏览器与设备上流畅运行。其设计遵循极简美学原则，通过智能响应式布局，实现从手机、平板到桌面电脑的无缝适配。模板采用清新淡雅的配色方案，搭配简洁明了的排版设计，大幅提升内容可读性。在功能层面，直观易用的导航系统结合丰富的交互设计，既增强了用户体验，又深度融合 SEO 优化策略，并严格遵循无障碍访问标准。无论是新手博主还是专业创作者，都能借助 B2 模板，快速搭建兼具视觉吸引力与实用价值的个性化博客平台。",
    image:
      "https://cdn.pixabay.com/photo/2023/01/30/07/24/losangeles-7754986_1280.jpg",
    link: "https://show.aixdb.cn",
    tags: [
      { name: "React", color: "#ef4444" },
      { name: "Nuxt", color: "#10b981" },
      { name: "Astro", color: "#6366f1" },
      { name: "Alpine.js", color: "#1334f1" },
    ],
  },
];
</script>

<template>
  <h2 class="project-title">gitee 项目</h2>
  <p class="project-desc">记录点点滴滴，每天更美好</p>

  <div class="project-list">
    <div class="project-card" v-for="(item, index) in projects" :key="index">
      <img class="project-image" :src="item.image" :alt="item.title" />
      <div class="project-info">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <div class="tech-tags">
          <span
            v-for="(tag, tagIndex) in item.tags"
            :key="tagIndex"
            class="tech-tag"
            :style="{ backgroundColor: tag.color }"
          >
            {{ tag.name }}
          </span>
        </div>

        <a target="_blank" class="btn" :href="item.link">查看项目</a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.project-title {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  margin: 40px 0 20px;

  background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

@keyframes glowText {
  0% {
    text-shadow: 0 0 5px #ff6ec4, 0 0 10px #7873f5, 0 0 20px #4ade80;
  }
  50% {
    text-shadow: 0 0 10px #4ade80, 0 0 20px #7873f5, 0 0 40px #ff6ec4;
  }
  100% {
    text-shadow: 0 0 5px #ff6ec4, 0 0 10px #7873f5, 0 0 20px #4ade80;
  }
}

.project-card {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;

  &:hover .project-image {
    transform: scale(1.05);
  }
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tech-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.project-image {
  width: 100%;
  // height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-info {
  padding: 16px;
  text-align: left;

  h3 {
    margin: 0 0 8px;
    font-size: 18px;
  }
  p::-webkit-scrollbar {
    width: 6px;
  }

  p::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #666;

    height: 2.8em; // 控制为两行文本高度（大概每行1.4em）
    overflow-y: auto;
  }

  .btn {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 13px 0;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s ease;
    text-align: center;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      transition: left 0.4s ease;
    }

    &:hover::before {
      left: 0;
    }
  }
}

@media (max-width: 768px) {
  .project-list {
    flex-direction: column;
  }

  .project-card {
    flex: 1 1 100%;
  }
}
</style>